<template>
  <div class="container">
    <div class="top">top</div>
    <div class="center">
      <div class="sider">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          unique-opened
          router
        >
          <el-sub-menu
            :index="items.id + ''"
            v-for="items in getNewMenus"
            :key="items.id"
          >
            <template #title>
              <span>{{ items.title }}</span>
            </template>
            <template v-for="item in items.children" :key="item.id">
              <!-- 这里的index是一级菜单的name + 二级菜单的name 
                   v-if="!item.hidden" hidden是0的在展示，数据太多了
              -->
              <el-menu-item
                v-if="!item.hidden"
                :index="'/' + items.name + '/' + item.name"
                >{{ item.title }}</el-menu-item
              >
            </template>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {} from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const getNewMenus = store.getters.getNewMenus // 一级菜单
// const getOrderMenus = store.getters.getOrderMenus // 二级订单
// const getSmsMenus = store.getters.getSmsMenus // 二级营销
// const getUmsMenus = store.getters.getUmsMenus // 二级权限
// const getProductMenus = store.getters.getProductMenus // 二级商品
// 处理订单列表
// const handleMenu = () => {
//   getOneMenus.forEach((item: any) => {
//     if (item.id == 97) {
//       item.children = getUmsMenus
//     }
//     if (item.id == 117) {
//       item.children = getOrderMenus
//     }
//     if (item.id == 118) {
//       item.children = getSmsMenus
//     }
//     if (item.id == 99) {
//       item.children = getProductMenus
//     }
//   })
//   return getOneMenus
// }
// handleMenu()
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  background-color: lightblue;
  display: flex;
  flex-direction: column;
  .top {
    height: 10vh;
    background-color: lightcoral;
  }
  .center {
    display: flex;
    flex: 1;
    height: 90vh;
    .sider {
      width: 200px;
    }
    .main {
      flex: 1;
      height: 100%;
      background-color: pink;
    }
  }
}
</style>
